<template>
  <div v-loading="loading" class="wrapper">
    <room-step :status="status" />
    <div class="info-container">
      <div class="user-info">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单信息</span>
            <div class="btn-wrap">
              <el-button v-if="Number(detail.status) === 0" type="success" style="float: right;width: 120px;" round @click="handleAccept">已到店</el-button>
            </div>
          </div>
          <div class="info">
            <el-row class="info-content">
              <div class="info-title">兑换用户：</div>
              <div>{{ detail.nickname }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">兑换房型：</div>
              <div>{{ detail.package_name }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">兑换天数：</div>
              <div>{{ detail.exchange_day }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">使用房时：</div>
              <div>{{ detail.used_quantity }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">预计到店时间：</div>
              <div>{{ detail.arrival_time ? detail.arrival_time : '' }}</div>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">状态：</div>
              <el-tag v-show="detail.status === 1" type="success">已到店</el-tag>
              <el-tag v-show="detail.status === 0">已兑换</el-tag>
            </el-row>
            <el-row class="info-content">
              <div class="info-title">创建时间：</div>
              <div>{{ detail.create_at ? parseTimeFuc(detail.create_at) : '' }}</div>
            </el-row>
            <el-row v-show="detail.status === 1" class="info-content">
              <div class="info-title">到店时间：</div>
              <div>{{ detail.write_off_at ? parseTimeFuc(detail.write_off_at) : '' }}</div>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
    <print v-if="showPrint" :type="7" :info="detail" />
  </div>
</template>
<script>
import RoomStep from '@/components/roomStep'
import { roomDetail, roomAccept } from '@/api/order'
import { parseTime } from '@/utils'
import Print from '@/components/print'
export default {
  name: 'RoomDetails',
  components: {
    RoomStep,
    Print
  },
  data() {
    return {
      loading: false,
      status: 0,
      detail: {},
      parseTimeFuc: parseTime
    }
  },
  computed: {
    showPrint() {
      return Object.keys(this.detail).length
    }
  },
  created() {
    this.initDetail()
  },
  methods: {
    async initDetail() {
      this.loading = true
      const { id } = this.$route.query
      const res = await roomDetail({ id })
      this.loading = false
      const { detail } = res.data
      if (!res.data.detail) {
        this.detail = {}
      } else {
        this.detail = detail
      }
      this.status = detail.status
    },
    // 到店
    async handleAccept() {
      const { id } = this.$route.query
      try {
        await roomAccept({ id })
        this.$message.success({
          message: '到店成功'
        })
        this.initDetail()
      } catch (error) {
        this.$message.error({
          message: '到店失败'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2000;
  overflow-y: scroll;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  .info-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .user-info, .package {
      width: 50%;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .box-card{
      width: 100%;
      .btn-wrap{
        display: flex;

      }
      .btn{
        margin-right: 10px;
        cursor: auto
      }
      .info-content{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .info-title {
          width: 100px;
          min-width: 100px;
          white-space: nowrap;
          margin-right: 10px;
        }
        .pay-type{
          margin-bottom: 10px;
          padding-left: 20px;
          display: flex;
          box-sizing: border-box;
        }
      }
    }
    .clearfix{
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &::after{
        display: none
      }
    }
  }
}
</style>
